<template>
	<div>
		<el-table
			:data="tData"
			style="width:100%;border-radius:4px;"
			:header-cell-style="tableHead"
			:cell-style="tableBody" @selection-change="handleSelectionChange">
			<template v-for="(item,idx) in tHead">
				<el-table-column width="50" type="selection" v-if="item.selection"></el-table-column>
				<el-table-column
					:label="item.label"
					:width="item.width"
					:align="item.align?item.align:'center'"
					:type="item.index?'index':''" v-if="!item.selection"
					:fixed="item.fixed?item.fixed:false">
					<template slot-scope="scope">
						<div v-if="item.index">{{ scope.$index + 1 }}</div>
						<el-button v-if="item.operate" type="text" style="margin-right:5px;" v-for="(childitem,childidx) in item.operate" @click="operateClick(childitem,scope.row)">{{childitem}}</el-button>
						<el-switch
							v-if="item.switch"
							active-color="#28a4f4"
							inactive-color="#dcdfe6" v-model="scope.row[item.prop]" @change="switchChange(item.prop,scope.row)">
						</el-switch>
						<el-radio v-if="item.radio" :label="ri.id" v-for="(ri,ridx) in item.radio" v-model="scope.row[item.prop]" @change="radioChange(item.prop,scope.row)">{{ri.label}}</el-radio>
						<el-button v-if="item.link" @click="toInfo(scope.row)" type="text" size="small">{{scope.row[item.prop]}}</el-button>
						<div v-if="item.cusoperate">
							<el-button size="mini" style="margin:2px;" v-for="(childitem,childidx) in item.cusoperate.btns" @click="operateClick(childitem,scope.row)" :style="(item.cusoperate.has).indexOf(scope.row[childitem.value])!=-1?('color:#fff;background-color:'+item.cusoperate.activeColor+';border-color:'+item.cusoperate.activeColor+';'):''">{{childitem.label}}</el-button>
						</div>
						<div v-if="!item.index && !item.operate && !item.switch && !item.radio && !item.link && !item.selection && !item.cusoperate" v-html="scope.row[item.prop]" @click="clickFun(item,scope.row)"></div>

					</template>
				</el-table-column>
			</template>
		</el-table>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				width:"",
				multipleSelection:[]
			}
		},
		mounted() {
			var tHead = this.tHead;
		},
		props:{
			tHead: {
				required: true,
				type: Array
			},
			tData:{
				required: true,
				type: Array
			},
			childOpen:{
				type:Boolean
			}
		},
		methods:{
			tableHead ({row,rowIdx}) {
				return "background:#409efe;color:#fff;font-size:12px;height:36px;padding:0;line-height:36px;text-align:center;border:0;"
			},
			tableBody({row, column, rowIndex, columnIndex}){
				var style = "padding:0;font-size:12px;color:#8b8b8b;border:0;border-right:1px solid #d9f1f3;"
				if(rowIndex%2 != 0){
					if(columnIndex == 12){
						style += "border:0;"
					}
					style += "height:36px;line-height:36px;background:#eaf4fe;"

				}
				if(rowIndex%2 == 0){
					if(columnIndex == 12){
						style += "border:0;"
					}
					style += "height:44px;line-height:44px;background:#fff;"
				}
				return style;
			},
			operateClick (val,row) {
				this.$emit("operateClick",val,row)
			},
			toInfo (row) {
				this.$emit('linkFun',row)
			},
			switchChange(prop,row){
				this.$emit('switchChange',prop,row)
			},
			radioChange(prop,row){
				this.$emit('radioChange',prop,row)
			},
			handleSelectionChange(val){
				this.multipleSelection=val;
				// console.log(this.multipleSelection)
				this.$emit("selectionChange", this.multipleSelection)
			},
			clickFun(item,row){
				if(item.click){
					this.$emit("clickFun",row);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
